<%@ taglib prefix="s" uri="/struts-tags"%>

<script type="text/javascript">
	// URL to call ajax
	var BILL_LIST_URL    = "<s:url value='/bill/searchBillAjax_SearchStatementDateInMonth'/>";

	// Action formatter
	function actionFormatter(value,row,index){
		var s = '<a href="#" class="btnlogin" onclick="downloadrow(this)">Download</a> ';
		return s;
	}
	
	function onLoadSuccess(data) {
	}

	function getRowIndex(target){
		var tr = $(target).closest('tr.datagrid-row');
		return parseInt(tr.attr('datagrid-row-index'));
	}

	function downloadrow(target){
		var index = getRowIndex(target);
		$('#dg').datagrid('endEdit', getRowIndex(target));
		var row = $('#dg').datagrid('getRows')[index];
		var param = row.param;
		newparam = '<s:url action="download"/>?' + param;
		window.open(newparam,"blank","toolbar=no,width=500,height=500,scrollbars=yes,resizable=yes")
	}

	function onChangeMonths() {
		 $('#dg').datagrid('load',{
			 "selectedMonth": $('#selectedMonth').val(),
			 "groupInfo.groupCode" : $('#reportDownload_groupCode').val()
		 });
	}
</script>
<center>
<h2>Download Bills of ${groupInfo.groupName}</h2>
	<div class="demo-info">
		<div class="demo-tip icon-tip"></div>
	</div>
	<div style="margin:10px 0;">
		<select id="selectedMonth" onchange="onChangeMonths();">
			<option value="">--Select Month--</option>
			<s:iterator value="itemList" var="item">
				<option value="${item.itemValue}">${item.itemName}</option>
			</s:iterator>
		</select>
	</div>

	<s:hidden id="reportDownload_groupCode" name="groupInfo.groupCode"/>
	
	<table id="dg" class="easyui-datagrid" style="width:400px;height:auto"
			data-options="
				singleSelect: true,
				url: BILL_LIST_URL,
				loadFilter: function(data) {
					if (data.billInfoList !== null && data.billInfoList !== undefined) {
						return {rows: data.billInfoList, total: data.billInfoList.length}
					} else {
						return {rows: [], total: 0}
					}					
				},
				method: 'post',
				onLoadSuccess: onLoadSuccess,
				onBeforeEdit:function(index,row){
					row.editing = true;
					updateActions(index);
				},
				onAfterEdit:function(index,row){
					row.editing = false;
					updateActions(index);
				},
				onCancelEdit:function(index,row){
					row.editing = false;
					updateActions(index);
				}
			">
		<thead>
			<tr>
				<th data-options="field:'stmtdate',width:195,align:'center'">Statement Date</th>
				<th data-options="field:'param',hidden:true"></th>
				<th data-options="field:'action',width:200,align:'center',formatter:actionFormatter">Action</th>
			</tr>
		</thead>
	</table>
</center>